<template>
  <div class="item_container">
    <div class="img_box">
      <!-- <img src="../../assets/img/nav/a1.png" /> -->
      <img :src="imgUrl" />
    </div>
    <div class="title"
         @click="choiceType()">
      <a :href="href">{{category.categoryName}}</a>
    </div>
    <div class="detail">
      <p>{{category.categoryDetail}}</p>
    </div>
  </div>
</template>
<script>
import { getCategoryImg } from "../../api/http.js";
export default {
  props: {
    toCategory: {}
  },
  created () {
    console.log(this.toCategory)
    this.getCategoryImg(this.category.categoryImg)
  },
  data () {
    return {
      category: this.toCategory,
      imgUrl: '',
      href: this.Constants.baseRouterPath + '/addInfo' + this.toCategory.path
    }
  },
  methods: {
    async getCategoryImg (imgPath) {
      const { data: res } = await getCategoryImg(imgPath);
      this.imgUrl = window.URL.createObjectURL(res);
    },
    choiceType () {
      console.log(this.category.categoryName)
      this.$emit('getCloseDialogByAddType', false);
    }
  }

}
</script>
<style lang="less" scoped>
.item_container {
  text-align: center;
  margin: 10px;
  .img_box {
    margin: 0 auto;
    width: 100px;
    img {
      width: 100%;
    }
  }
  .title {
    text-align: center;
    font-size: 16px;
    color: rgba(41, 41, 41, 0.986);
  }
  .detail {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: rgb(150, 148, 148);
  }
}
p {
  margin: 0;
}
</style>